import { Icon } from 'antd';
import styled from 'styled-components';

export const Container = styled.section`
  width: 100%;
  height: 700px;
`

export const Zoom = styled(Icon)`
  display: block;
  font-size: 30px;
  color: #ccc;
  margin-left: 15px;
  &:hover {
    cursor: pointer;
    color: #0880DF;
  }
  &::selection{
    background:none;
  }
  transition: color 0.2s ease;
`

export const ImgC = styled.section`
  width: 100%; 
  height: 90%; 
  overflow: auto;
  position: relative;
  background: rgba(0, 0, 0, 0);
`

export const MyImg = styled.img`
  width: ${props => `${props.width || 100}%`};
  position: absolute;
  left: 0;
  transform: ${props => `rotate(${props.rotate}deg)`};
  top: ${props => `${props.top || 0}%`};
  transition: all 0.3s;
  &::selection{
    background:none;
  }
`

export const Point = styled.img`
  position: absolute;
  width: 22px;
  top: ${props => `calc(${props.top}% - 22px)`};
  left: ${props => `calc(${props.left}% - 10px)`};
  z-index: 3;
  &::selection{
    background:none;
  }
`

export const PointC = styled.section`
  position: absolute;
  transform: ${props => `rotate(${props.rotate}deg)`};
  height: ${props => `${props.height}px`};
  width: ${props => `${props.width}%`};
  background: rgba(0, 0, 0, 0);
  top: ${props => `${props.top || 0}%`};
  left: 0;
  z-index: 2;
`